<template>
  <div id="app">
    <transition name="opacity">
      <div class="mask" v-if="atNight"></div>
    </transition>
    <keep-alive>
      <router-view
        @changeAtNightState="changeAtNightState"
        :atNight="atNight"
        :allTags="allTags"
      />
    </keep-alive>
    <van-tabbar route v-show="$route.name != 'login'">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="play-circle-o" to="/classroom"
        >课堂</van-tabbar-item
      >
      <van-tabbar-item icon="balance-o" to="/store">商城</van-tabbar-item>
      <van-tabbar-item icon="star-o" to="/collection">收藏夹</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import qs from "qs";
import { Tabbar, TabbarItem } from "vant";
export default {
  name: "App",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data: () => {
    return {
      atNight: false,
      allTags: null,
    };
  },
  methods: {
    changeAtNightState() {
      this.atNight = !this.atNight;
    },
    //获取各个页面标签
    getTagsHandler() {
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/app/c`,
        data: qs.stringify({
          cs: '[{"n":"sharetext","v":"20230203"},{"n":"userMenuTutorial"},{"n":"qrcontent","v":"20230203"},{},{"n":"essentialRecipeGuideline"},{"n":"schemeblacklist"},{"n":"coursetags"},{"n":"family","v":"2018041913"},{"n":"profession","v":"2017082501"},{"n":"subscription","v":"20171107"},{"n":"countrycode","v":"2019081401"},{"n":"note"},{"n":"user_channels"},{"n":"stickers","v":"20230203192105"},{"n":"ingredient_units","v":"2020022121"}]',
        }),
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        this.allTags = res.data.result;
      });
    },
  },
  created() {
    this.getTagsHandler();
  },
};
</script>

<style lang="scss" scoped>
.van-tabbar-item {
  transition: 0.3s;
  color: var(--text-gray);
}
.van-tabbar-item--active {
  color: var(--text-yellow);
  background-color: var(--white);
}
#app {
  position: relative;
  width: 100vw;
  // height: 100vh;
  // overflow: scroll;
  // &::-webkit-scrollbar {
  //   display: none;
  // }
  .mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    opacity: 0.5;
    background-color: #000;
    pointer-events: none;
    z-index: 10000;
    transition: 1s;
  }
}
</style>